<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<div th:fragment="iosstyle">
	<style>
		body {
		  background-color: #f5f7f9;
		  color: #6c6c6c;
		  font: 300 1em/1.5em;
		}
		.container {
		  left: 50%;
		  position: absolute;
		  top: 100px;
		  transform: translate(-50%, -50%);
		}

		/* PROGRESS */
		.progress {
		  background-color: #e5e9eb;
		  height: 0.25em;
		  position: relative;
		  width: 24em;
		}
		.progress-bar {
		  animation-duration: 3s;
		  animation-name: width;
		  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
		  background-size: 24em 0.25em;
		  height: 100%;
		  position: relative;
		}
		.progress-shadow {
		  background-image: linear-gradient(to bottom, #eaecee, transparent);
		  height: 4em;
		  position: absolute;
		  top: 100%;
		  transform: skew(45deg);
		  transform-origin: 0 0;
		  width: 100%;
		}

		/* ANIMATIONS */
		@keyframes width {
		  0%, 100% {
			transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
		  }
		  0% {
			width: 0;
		  }
		  100% {
			width: 100%;
		  }
		}
		</style>
	<div class="container" >
		<div class="progress">
			<div class="progress-bar">
				<div class="progress-shadow"></div>
			</div>
		</div>
	</div>

<script type="text/javascript" th:src="@{/js/prefixfree.min.js}"></script>
</div>